<template>
  <div class="u_center">
      <Nav></Nav>
      <div class="u_centerMain wrap">

        <div class="u_centerTopBg">
          <div class="t">
            <div class="tL">
              <div class="tu">
                <img src="@/assets/img/account/user_log.jpg" >
              </div>
              <dl class="txtBox">
                <dt>
                  <div class="txt">
                    15152548675
                  </div>
                  <div class="tag">
                    <img src="@/assets/img/u_center/vip.png" >
                    <span>
                      未开通会员
                    </span>
                  </div>
                </dt>
                <dd>ID：29655</dd>
              </dl>
            </div>
            <div class="tR">
              退出登录
            </div>
          </div>
          <div class="b">

            <ul>
            	<li @click="btnTagFn(btnTagIdx)" :class="{'acBtnLi':btnTagIdx==curBtnIdx}" v-for="(btnTagIt,btnTagIdx) in btnTagArr" :key="'btnTagIt_0'+btnTagIdx">
                <span>
                  {{btnTagIt}}
                </span>
              </li>
            </ul>

          </div>
        </div>
        <div class="u_centerBotBg">
          <ul>
          	<li class="u_manageBg" v-show="0==curBtnIdx">

              <div class="tit_00">
                账户管理
              </div>

              <div class="u_mBox">
                <div class="tit_01">
                  我的信息
                </div>
                <ul>
                	<li>
                    <div class="li_L">
                      <div class="it_Name">
                        我的头像：
                      </div>
                      <div class="li_L_R">
                        <div class="txImg">
                          <img src="@/assets/img/account/user_log.jpg" >
                          <input type="file" @change="upTuFn" accept="image/*">
                        </div>
                      </div>
                    </div>
                    <div class="li_R">
                      <span>
                        修改
                        <input type="file" @change="upTuFn" accept="image/*">
                      </span>
                    </div>
                  </li>
                	<li>
                    <div class="li_L">
                        <div class="it_Name">
                          我的昵称：
                        </div>
                        <div class="li_L_R">
                          <div class="txt">
                            15152548675
                          </div>
                        </div>
                      </div>
                      <div class="li_R">
                        <span>
                          修改
                        </span>
                      </div>

                  </li>
                	<li>
                    <div class="li_L">
                        <div class="it_Name">
                          手机号：
                        </div>
                        <div class="li_L_R">
                          <div class="txt">
                            151****8675
                          </div>
                        </div>
                      </div>
                      <div class="li_R">
                        <span>
                          修改
                        </span>
                      </div>

                  </li>
                	<li>
                    <div class="li_L">
                        <div class="it_Name">
                          我的ID：
                        </div>
                        <div class="li_L_R">
                          <div class="txt">
                            29655
                          </div>
                        </div>
                      </div>
                  </li>
                </ul>
              </div>

               <div class="u_mBox">
                 <div class="tit_01">
                   密码设置
                 </div>
                 <ul>

                 	<li>
                     <div class="li_L">
                         <div class="it_Name">
                           我的密码：
                         </div>
                         <div class="li_L_R">
                           <div class="txt">
                             ******
                           </div>
                         </div>
                       </div>
                       <div class="li_R">
                         <span>
                           修改
                         </span>
                       </div>

                   </li>

                 </ul>
               </div>

               <div class="u_manageBot">
                 <div class="u_manageBtn">
                   保存
                 </div>
               </div>

            </li>
          	<li v-show="1==curBtnIdx">
              VIP套餐
            </li>
          	<li class="coin_chargeBg" v-show="2==curBtnIdx">
                <div class="coin_chargeMain">

                    <ul class="top">
                      <li>
                        <h6>
                          我的金币(个)：
                        </h6>
                        <h2>
                          0.00
                        </h2>
                      </li>
                      <li>
                        <h6>
                          累计充值(个)：
                        </h6>
                        <h2>
                          0.00
                        </h2>
                      </li>
                      <li>
                        <h6>
                          累计消费(个)：
                        </h6>
                        <h2>
                          0.00
                        </h2>
                      </li>
                    </ul>

                    <ul class="midBtn">
                    	<li @click="midBtnFn(coin_cIdx)" :class="{'midBtnAc':midBtnIndex==coin_cIdx}" v-for="(coin_cIt,coin_cIdx) in coin_cBtn" :key="'coin_cIt_0'+coin_cIdx">
                        <span>
                          {{coin_cIt}}
                        </span>
                      </li>
                    </ul>

                    <ul class="botBg">
                    	<li class="chargeLiBg" v-show="midBtnIndex==0">

                        <div class="chargeNumBg">
                          <h2 class="c_title">
                            充值数量
                          </h2>

                          <ul class="chargeNum">
                            <li@click="c_NumLiBtnFn(c_NumLiIdx)" class="c_NumLi_00" :class="{'c_NumAc':c_NumLiIdx==cur_c_NumLi}" v-for="(c_NumLiIt,c_NumLiIdx) in c_NumLiArr" :key="'c_NumLiIt_0'+c_NumLiIdx">
                              <div class="tu">
                                <img src="@/assets/img/coinCharge/earth.png" >
                                <h2>
                                  {{c_NumLiIt.num_00}}
                                </h2>
                              </div>
                              <div class="txt">
                                ￥{{c_NumLiIt.num_01}}
                              </div>
                            </li>
                            <li class="c_NumLi_01">
                              <input type="number" v-model="transNum"/>
                              <span>
                                元
                              </span>
                              <img src="@/assets/img/coinCharge/trans.png" class="trans">
                              <img src="@/assets/img/coinCharge/earth.png" class="earth">
                              <p>
                                9999
                              </p>
                            </li>
                          </ul>

                        </div>
                        <div class="chargeMethodBg">
                          <h2 class="c_title">
                            支付方式
                          </h2>

                          <ul class="chargeMethod">
                          	<li @click="c_methFn(0)" :class="{'c_NumAc':cur_c_NumAc==0}">
                              <div class="tu">
                                <img src="@/assets/img/coinCharge/yuan.png" >
                              </div>
                              <div class="txt">
                                <p>
                                  余额支付
                                </p>
                                <span>
                                  余额：￥0.00
                                </span>
                              </div>
                            </li>
                          	<li @click="c_methFn(1)" :class="{'c_NumAc':cur_c_NumAc==1}">
                              <div class="tu">
                                <img src="@/assets/img/coinCharge/wxpay.png" >
                              </div>
                              <div class="txt">
                                <p>
                                  微信支付
                                </p>
                              </div>
                            </li>
                          	<li @click="c_methFn(2)" :class="{'c_NumAc':cur_c_NumAc==2}">
                              <div class="tu">
                                <img src="@/assets/img/coinCharge/alipay.png" >
                              </div>
                              <div class="txt">
                                <p>
                                  支付宝支付
                                </p>
                              </div>
                            </li>
                          </ul>

                        </div>

                        <div class="goPayBtn">
                          去支付
                        </div>
                      </li>
                    	<li class="detailLiBg" v-show="midBtnIndex==1">
                        <div class="detail_btnBg">
                          <div @click="acDetFn(detailBtnIdx)" :class="{'acDetBtn':cur_detailBtnIdx==detailBtnIdx}" v-for="(detailBtnIt,detailBtnIdx) in detailBtn" :key="'detailBtnIt_0'+detailBtnIdx" class="detail_btn">
                            <span>
                              {{detailBtnIt}}
                            </span>
                          </div>
                        </div>

                        <div class="detail_DataBg">
                          <div class="noData">
                            <img src="@/assets/img/coinCharge/empty.png" >
                          </div>

                          <div class="beizhu">
                            <img src="@/assets/img/coinCharge/warning.svg" >
                            <span>
                              系统仅显示您两年之内的余额明细，更早的余额明细不再显示
                            </span>
                          </div>

                        </div>

                      </li>
                    </ul>

                </div>
            </li>
          	<li v-show="3==curBtnIdx">
              消费明细
            </li>
          	<li v-show="4==curBtnIdx">
              充值记录
            </li>
          	<li v-show="5==curBtnIdx">
              邀请奖励
            </li>
          </ul>
        </div>

      </div>
      <Foot></Foot>
  </div>
</template>

<script>
  import Foot from "@/components/foot.vue"
  import Nav from "@/components/nav.vue";
  export default{
    data(){
      return{
        curBtnIdx:0,
        cur_c_NumAc:null,
        btnTagArr:[
          "账户管理",
          "VIP套餐",
          "金币充值",
          "消费明细",
          "充值记录",
          "邀请奖励"
        ],
        coin_cBtn:[
          "充值",
          "明细"
        ],
        midBtnIndex:0,
        c_NumLiArr:[
          {
            num_00:"60",
            num_01:"6"
          },
          {
            num_00:"100",
            num_01:"10"
          },
          {
            num_00:"300",
            num_01:"30"
          },
          {
            num_00:"500",
            num_01:"50"
          },
          {
            num_00:"980",
            num_01:"98"
          },
          {
            num_00:"1980",
            num_01:"198"
          },
          {
            num_00:"2980",
            num_01:"298"
          },
          {
            num_00:"5180",
            num_01:"518"
          },
          {
            num_00:"15980",
            num_01:"1598"
          }
        ],
        cur_c_NumLi:null,
        transNum:1,
        detailBtn:[
          "全部",
          "收入明细",
          "支出明细"
        ],
        cur_detailBtnIdx:0
      }
    },
    components:{
      Nav,
      Foot
    },
    methods:{
			upTuFn(event){
					let formData = new FormData();
					let file = event.currentTarget.files;
					formData.append('image', file[0]);
					console.log('image', file[0]);
					// axios({
					// 	method: 'POST',
					// 	url: `${baseUrl}api/addressuser/smrz`,
					// 	data:formData,
					// 	headers: {
					// 		'Content-Type': 'multipart/form-data'
					// 	}
					// }).then((res)=>{
					// 	console.log("图片上传请求成功：",res);
					// 	console.log(baseUrl);
					// 	this.upReTu=baseUrl+res.data.data;

					// })
					// .catch((err)=>{
					// 	console.log("图片上传请求失败：",err);
					// });
				},
      c_methFn(val){
        let that=this;
        that.cur_c_NumAc=val;
      },
      acDetFn(val){
        let that=this;
        that.cur_detailBtnIdx=val;
      },
      c_NumLiBtnFn(val){
        let that=this;
        that.cur_c_NumLi=val;
      },
      btnTagFn(val){
        let that=this;
        that.curBtnIdx=val;
      },
      midBtnFn(val){
        let that=this;
        that.midBtnIndex=val;
        console.log("midBtnFn:",val);
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  @import "../assets/css/u_center.less";
</style>
